<template>
  <nuxt-link external :to="$localePath(`/article/${data.urlName || data.id}`)" class="flex flex-col mt-3 group">
    <y-image
      lazy
      class="trans mb-2.5 rounded-lg object-cover h-[140px]"
      :src="$withPicOrigin(data.imageUrl)"
      alt="article banner"
      width="250px"
      height="140px" />
    <p
      class="group-hover:text-[#EB414E] duration-75 text-white3 break-all text-left text-xs leading-2 pl-1 lg:pl-0 lg:text-sm line-clamp-2">
      {{ data.title }}
    </p>
  </nuxt-link>
</template>

<script setup lang="ts">
import YImage from '~/components/logic/YImage.vue'

const props = defineProps(['data'])
</script>

<style scoped lang="scss">
@keyframes scale-big {
  to {
    transform: scale3d(1.05, 1.05, 1.05);
  }
}

.trans {
  &:hover {
    animation: scale-big 0.3s forwards;
  }
}
</style>
